I am writing one of my first vitest and my code does a test of the visualViewport when the component is mounted. When I run the test, it fails because the visualViewport is not defined. How would I go about having this defined when the test runs?
onMounted(() => {
if (visualViewport.width > 1024) {
options.isDesktop = true;
}
visualViewport.addEventListener('resize', ({target}) => {
if (target.width > 1024) {
options.isDesktop = true;
} else {
options.isDesktop = false;
}
});
});
ReferenceError: visualViewport is not defined
│ ❯ src/scripts/search-and-filter/App.vue:22:3
│ 20|
│ 21| onMounted(() => {
│ 22| if (visualViewport.width > 1024) {
│ | ^
│ 23| options.isDesktop = true;
│ 24| }
Let me know if more information is needed and I will add it. Thank you for your help.
jsdom is being used so I don't think that is the problem.
Related
In the resources/js folder, I've a LJS.js file that contains only a simply function, See below.
function ljs_isNullBlankEmpty(str) {
var result = true;
if (!str && str.trim().length !== 0) {
result = false;
}
return result;
}
in my webpack.mix.js, I've this:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/LJS.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', [])
.sass('resources/sass/main.scss', 'public/css', []);
I then ran the 'npm run dev', and it generated the LJS.js file in the public/js folder. But the content of my resources/js/LJS.js is being placed inside of the '(() => { })()'. Below is what it generated:
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!*****************************!*\
!*** ./resources/js/LJS.js ***!
\*****************************/
function ljs_isNullBlankEmpty(str) {
var result = true;
if (!str && str.trim().length !== 0) {
result = false;
}
return result;
}
/******/ })()
;
why does it puts the content inside of the (() => { })()? How can I call the ljs_isNullBlankEmpty function in my webpage?
I tried to run following terraform code o create test smb share but got error
see code
provider "aws" {
region = "us-east-1"
}
resource "aws_storagegateway_smb_file_share" "test_smb_share" {
authentication = "ActiveDirectory"
gateway_arn = "arn:aws:storagegateway:us-east-1:145429107744:gateway/sgw-4xxxxxxx"
default_storage_class = "S3_STANDARD"
location_arn = "arn:aws:s3:::xxxxxxxx"
role_arn = "arn:aws:iam::145429107744:role/service-role/StorageGatewayBucketAccessRolee896cdf0-cb46-4471-a0de-119f69f87e"
valid_user_list = ["#Domain Admins","#Admins"]
kms_encrypted = "true"
kms_key_arn = "arn:aws:kms:us-east-1:145429107744:key/8c4b962b-c00a-4a32-8fbd-76b174efb609"
tags = {
atomdev = "prod"
atomdomain = "xxxxxx"
atomos = "file system"
atompid = "32"
atomrole = "storage"
}
}
aws_storagegateway_smb_file_share.test_smb_share: Creating...
╷
│ Error: error creating Storage Gateway SMB File Share: InvalidGatewayRequestException: OverlappingLocations
│ {
│ RespMetadata: {
│ StatusCode: 400,
│ RequestID: "e8f7466d-23af-4a4c-a457-d39a0f99406d"
│ },
│ Error_: {
│ ErrorCode: "OverlappingLocations"
│ },
│ Message_: "OverlappingLocations"
│ }
│
│ with aws_storagegateway_smb_file_share.test_smb_share,
│ on main.tf line 5, in resource "aws_storagegateway_smb_file_share" "test_smb_share":
│ 5: resource "aws_storagegateway_smb_file_share" "test_smb_share" {
│
any idea?
If you try to run two shares on the same SGW that have overlapping S3 locations, you'll get this error. For example:
\\my-s3-bucket\folder1\data
\\my-s3-bucket\folder1
^ those would overlap, since one would contain a subset of the other
i'm on Nuxtjs 2.15.4 and I'm trying to create multi themes for my app.
The flow is very simple: I have a themes folder with my themes folder within. At nuxt build/dev a module will be called:
const path = require('path')
const chokidar = require('chokidar');
const fse = require('fs-extra');
export default async function (moduleOptions) {
// moduleOptions.themeName = 'newtheme' & moduleOptions.customizeTheme = 'false'
const themeName = moduleOptions.themeName
const defaultThemeDir = path.join(this.options.rootDir, './themes/main')
const newThemeDir = path.join(this.options.rootDir, './themes/'+moduleOptions.themeName)
const sourceDir = path.join(this.options.rootDir, './')
const emptySourceDir = async () => {
fse.emptyDir(path.join(this.options.rootDir, 'assets'))
fse.emptyDir(path.join(this.options.rootDir, 'components'))
fse.emptyDir(path.join(this.options.rootDir, 'layouts'))
fse.emptyDir(path.join(this.options.rootDir, 'middleware'))
fse.emptyDir(path.join(this.options.rootDir, 'pages'))
fse.emptyDir(path.join(this.options.rootDir, 'plugins'))
fse.emptyDir(path.join(this.options.rootDir, 'static'))
}
const copyThemesDirectory = async () => {
await fse.copy(path.join(defaultThemeDir, 'base'), sourceDir)
if(themeName !== 'main'){
await fse.copy(path.join(newThemeDir, 'base'), sourceDir)
}
if(moduleOptions.customizeTheme === 'true'){
await fse.copy(path.join(newThemeDir, 'custom'), sourceDir)
}
}
const toTargetPath = (oldPath) => {
let newPath = oldPath.replace(this.options.rootDir, '')
.replace('\\themes\\main\\base\\', '\\')
.replace('\\themes\\main\\custom\\', '\\')
.replace('\\themes\\'+themeName+'\\base\\', '\\')
.replace('\\themes\\'+themeName+'\\custom\\', '\\')
return path.join(this.options.rootDir, newPath)
}
await emptySourceDir()
await copyThemesDirectory()
if(process.env.NODE_ENV === 'development'){
chokidar.watch([defaultThemeDir, newThemeDir]).on('all', async (event, filePath) => {
if (event === 'add' || event === 'change') {
fse.copy(filePath, toTargetPath(filePath))
}
if (event === 'unlink') {
fse.remove(toTargetPath(filePath))
}
})
}
}
it will empty the some folders in nuxt root directory, and then copy themes/main/base into them. after that it will check if theme name is not "main" it will copy themes/{themeName}/base into root directory. then it will check for customization option and if true, it will copy theme/{themeName}/custom folders to root Directory.
this part is done without problem! the second part that is for development mode, gives me error that such files (new files that added to new theme or custom) don't exist.
that part with the help of chokidar watch my themes folder and if anything is changed it will remove or copy that on root directory. the error is shown if the same file exits in the main theme base folders.
I even tried fse.copy(filePath, toTargetPath(filePath),{overwrite: true}) and fse.copySync(filePath, toTargetPath(filePath),{overwrite: true})
here is an example of errors:
ERROR ENOENT: no such file or directory, unlink '{my-local-directory}\components\global\footer\sub\links.vue'
anyone know what's wrong with it?? it also run the watch change or add part even on first try when simply copying from themes to root.
#UPDATE
looks like there is error even in build. I build and it gives me
Error: ENOENT: no such file or directory, mkdir '/var/www/static/images/folder'
then again when i'm building it run without error. this is my themes folder structure:
-themes
|__ main
| |__base
| | |__assets
| | |__components
| | |__middleware
| | |__layouts
| | |__pages
| | |__plugins
| | |__static
| |
| |__custom
|
|__ newtheme
|__base
|__custom
Case:
New to testcafe and I would appreciate if someone could help.
I want to loop through a list of buttons with dynamic classes, click them and check if the class has changed.
I fail to loop and assert that the classes has changed.
(The element that matches the specified selector is not visible.)
fixture`The Loop`.beforeEach(async (t) => {
await t.useRole(loginUser);
})
test("Summary List check marks", async (t) => {
// const markStop = Selector('div.btn-group-y').find('[data-attribute="markStopBtn"]')
await t.click(selector.driverReadyBtn);
let markStopBtn = await selector.markStopBtn
let markStopBtnCount = await markStopBtn.count;
for(let i=0; i < markStopBtnCount; i++){
if(markStopBtn.nth(i).exists && markStopBtn.nth(i).visible) {
await t
.click(markStopBtn.nth(i))
// .expect(markStopBtn.withAttribute('class', 'btn-primary').exists).ok()
}
}
});
File.Vue///
<div
data-attribute="markStopBtn"
:class="[
'btn btn-icon btn-secondary-outline p-4',
{
['btn-primary']: completed,
['btn-cancelled']: issued,
['btn-blueDark-inverse']: !issued && !completed,
},
]"
#click="clickCompleteStop"
>
Trows Error
(The element that matches the specified selector is not visible.)
| if(markStopBtn.nth(i).exists && markStopBtn.nth(i).visible) {
23 | await t
> 24 | .click(markStopBtn.nth(i))
25 | // .expect(markStopBtn.withAttribute('class', 'btn-primary').exists).ok()
26 | }
In my React Native 0.62.2 app, a fetch is used to fetch an image IMG_1885.jpg from cloud object storage for test purpose:
let img = await fetch(bgimage.uri, {
method:"GET",
'Content-Type': 'image/jpeg'
});
Here is the http return and is assigned to variable img:
'img in sp ', { type: 'default', //<<<==output of img
│ status: 200,
│ ok: true,
│ statusText: undefined,
│ headers:
│ { map:
│ { 'x-oss-storage-class': 'Standard',
│ 'accept-ranges': 'bytes',
│ 'content-md5': 'Au4QpWK3O8+l4qCYxDjzw==',
│ 'content-length': '475266', //<<<==size of file
│ connection: 'keep-alive',
│ 'content-type': 'image/jpeg', //<<<<==jpeg
│ 'x-oss-server-time': '20',
│ 'x-oss-object-type': 'Normal',
│ date: 'Sun, 05 Jul 2020 21:20:16 GMT',
│ 'x-oss-force-download': 'true', //<<<==server force frontend to download
│ 'content-disposition': 'attachment',
│ 'x-oss-request-id': '5F024410980C637340B8FBD',
│ 'last-modified': 'Sun, 05 Jul 2020 17:26:04 GMT',
│ etag: '"02EE10A562B73BC23E978A826310E3CF"',
│ 'x-oss-server-side-encryption': 'AES256',
│ 'x-oss-hash-crc64ecma': '65781719895705534',
│ server: 'AliyunOSS' } },
│ url: 'https://oss-hz-1.oss-cn-hangzhou.aliyuncs.com/IMG_1885.jpg?Expires=1593984273&OSSAccessKeyId=myID&Signature=mySigna',
│ bodyUsed: false,
│ _bodyInit:
│ { _data:
│ { size: 475266,
│ offset: 0,
│ blobId: '7f5f3eb5-8e02-470a-a06c-81bcd1161df8',
│ __collector: {} } },
│ _bodyBlob:
│ { _data:
│ { size: 475266,
│ offset: 0,
│ blobId: '7f5f3eb5-8e02-470a-a06c-81bcd1161df8',
└ __collector: {} } } }
The http status is 200, the content size matches the test file.
Here is the output of img.blob() which has no image data:
[14:20:16] I | ReactNativeJS ▶︎ 'img blob ', { _data: //<<<== output of img.blob()
│ { size: 475266,
│ offset: 0,
│ blobId: '7f5f3eb5-8e02-470a-a06c-81bcd1161df8',
└ __collector: {} } }
img.json() returns error: [SyntaxError: JSON Parse error: Unrecognized token '�']
How to retrieve the image content from img returned?